<template>
  <div class="senior-customer">
    <div class="head" style="margin-bottom: 15px">
      <child-text class="item" title="客服" isslot :value="updateInfo.name" :xs='24' :sm="10">
        <template slot-scope="info">
          <el-input disabled type="text" v-model="info.data"></el-input>
        </template>
      </child-text>
      <child-text class="item" title="数据ID" isslot :xs='24'>
        <el-input type="text" v-model="query.dataId"></el-input>
      </child-text>
      <child-text class="item transTime" title="开始日期" isslot :xs='24' :sm="10">
        <el-date-picker
          v-model="query.start"
          type="date"
          ref="pickerStart"
          value-format="yyyy-MM-dd"
          :picker-options="pickerStart"
          placeholder="选择日期">
        </el-date-picker>
      </child-text>
      <child-text class="item transTime" title="结束日期" isslot :xs='24' :sm="10">
        <el-date-picker
          v-model="query.end"
          ref="pickerEnd"
          type="date"
          :picker-options="pickerEnd"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </child-text>
      <el-col :xs="24" :sm='4' class="btn-block">
        <el-button :disabled="listLoading" @click="getList" type="primary" class="btn-item">查询</el-button>
      </el-col>
    </div>
    <el-table
      :data="list"
      v-loading.body="listLoading"
      style="width: 100%">
      <el-table-column v-if="!isWeb" type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="数据ID:">
              <span>{{ props.row.customerName }}</span>
            </el-form-item>

            <el-form-item label="关键词:">
                <span :key="idx" v-for="(tmp,idx) in props.row.word">
                  {{tmp}}
                </span>
            </el-form-item>

            <el-form-item label="系统标签:">
                <span :key="idx" v-for="(tmp,idx) in props.row.label">
                  {{tmp}}
                </span>
            </el-form-item>

            <el-form-item label="客服标签:">
              <span v-if='!props.row.userLabel'>-</span>
              <span v-else>
                  <span :key="idx" v-for=" (tmp,idx) in props.row.userLabel.split('$') ">
                    {{tmp}}
                  </span>
                </span>
            </el-form-item>

            <el-form-item label="号码归属地:">
              <span>{{ props.row.provinceName ?  (props.row.provinceName + ( props.row.cityName === '' ? '' :  '/' + props.row.cityName )) : '-' }}</span>
            </el-form-item>

            <el-form-item label="客服:">
              <span>{{ props.row.userName ?  props.row.userName : '-'}}</span>
            </el-form-item>

            <el-form-item label="转化时间:">
              <span>{{ props.row.callTime ?  props.row.callTime.split('.')[0] : '-'}}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column align="center" label="数据ID">
        <template slot-scope="scope">
          <span>{{scope.row.customerName}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="关键信息">
        <template slot-scope="scope" style="text-align:left">
          <p v-if='!scope.row.keyInfo'>-</p>
          <div v-else>
            <p :key="idx" v-for=" (tmp,idx) in scope.row.keyInfo.split('$') ">
              {{tmp}}
            </p>
          </div>
        </template>
      </el-table-column>

      <el-table-column align="center" label="呼叫备注">
        <template slot-scope="scope">
          <span>{{ scope.row.remarks ? scope.row.remarks : '-' }}</span>
        </template>
      </el-table-column>

      <template v-if="isWeb">
        <el-table-column align="center" label="关键词">
          <template slot-scope="scope">
            <p :key="idx" v-for=" (tmp,idx) in scope.row.word">
              {{tmp}}
            </p>
          </template>
        </el-table-column>

        <el-table-column align="center" label="系统标签">
          <template slot-scope="scope">
            <p :key="idx" v-for=" (tmp,idx) in scope.row.label">
              {{tmp}}
            </p>
          </template>
        </el-table-column>

        <el-table-column align="center" label="客服标签">
          <template slot-scope="scope" style="text-align:left">
            <p v-if='!scope.row.userLabel'>-</p>
            <div v-else>
              <p :key="idx" v-for=" (tmp,idx) in scope.row.userLabel.split('$') ">
                {{tmp}}
              </p>
            </div>
          </template>
        </el-table-column>

        <el-table-column align="center" label="号码归属地">
          <template slot-scope="scope">
            <span>{{ scope.row.provinceName ?  (scope.row.provinceName + ( scope.row.cityName === '' ? '' :  '/' + scope.row.cityName )) : '-' }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="客服">
          <template slot-scope="scope">
            <span>{{ scope.row.userName ?  scope.row.userName : '-'}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="转化时间">
          <template slot-scope="scope">
            <span>{{ scope.row.callTime ?  scope.row.callTime.split('.')[0] : '-'}}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div v-if="!isWeb" v-show="!listLoading && total >= 10" style="margin-top: 20px;text-align: center">
      <el-button-group>
        <el-button @click="prev" type="primary" :disabled="prevDisabled" icon="el-icon-arrow-left">上一页</el-button>
        <el-button @click="next" type="primary" :disabled="nextDisabled">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      </el-button-group>
    </div>
    <div  v-else v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" prev-text="上一页" next-text="下一页"
                     @current-change="handleCurrentChange" :current-page.sync="query.current"
                     :page-sizes="[10,20,30,50]" :page-size="query.pagesize"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import childText from "../seniCustomer/childText.vue";
  import {getTransList} from "@/api/highServer"
  import {mapGetters} from 'vuex'

  export default {
    data() {
      return {
        prevDisabled: false,
        nextDisabled: false,
        listLoading: false,
        name: "search",
        pickerStart: {
          disabledDate: (time) => {
            return time.getTime() > Date.now() ||
              (!!this.query.end && time.getTime() > new Date(this.query.end).getTime())
          }
        },
        pickerEnd: {
          disabledDate: (time) => {
            return time.getTime() > Date.now() ||
              (!!this.query.start && time.getTime() < new Date(this.query.start).getTime())
          }
        },
        list:[],
        total: 0,
        query: {
          pagesize: 10,
          current: 1,
          dataId: '',
          start: '',
          end: ''
        }
      };
    },
    components: {
      childText
    },
    computed: {
      ...mapGetters([
        'updateInfo'
      ]),
      isWeb() {
        return window.innerWidth > 479 ? true : false;
      }
    },
    created(){
      this.getList()
    },
    watch: {
      'query.current':{
        handler:function(current) {
          if(current <= 1){
            this.prevDisabled = true
          }
          if( current >= Math.ceil(this.total / this.query.pagesize)){
            this.nextDisabled = true
          }
        },
        immediate: true
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.$refs.pickerStart.$el.children[0].setAttribute('readOnly', 'readOnly')
        this.$refs.pickerEnd.$el.children[0].setAttribute('readOnly', 'readOnly')
      })
    },
    methods: {
      getList() {
        if(!this.query.start && this.query.end || this.query.start && !this.query.end){
          this.$message.error('请设置一个查询时间区间');
          return
        }
        let temp = Object.assign({},this.query);
        if(!temp.start  && !!temp.end ){
          delete temp.start
          delete temp.end
        }
        temp['userId'] = this.updateInfo.userId;
        this.listLoading = true;
        console.log(temp);
        getTransList(temp)
          .then(res => {
            let temp = res.data.info;
            this.list = temp;
            this.total = res.data.total * 1;
            this.listLoading = false;
          })
          .catch(res => {
            this.listLoading = false;
            this.$message.error(res);
          });
      },
      prev(){
        if(this.query.current <= 1){
          return
        }
        this.query.current--
        this.getList();
      },
      next(){
        if(this.query.current >= Math.ceil(this.total / this.query.pagesize) ){
          return
        }
        this.query.current++
        this.getList();
      },
      handleSizeChange(val) {
        this.query.pagesize = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.query.current = val;
        this.getList();
      },
    }
  };
</script>
<style type="text/scss" lang="scss" scoped>
  .senior-customer {
    .transTime {
      height: auto;
    }
    .item {
      margin-bottom: 15px;
    }
  }

  @media (max-width: 479px) {
    .senior-customer {
      .btn-block {
        margin-bottom: 15px;
        text-align: center;
        .btn-item {
          width: 90%;
        }
      }
    }
  }
</style>


